<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>悬赏令信息管理注册入口</title>
  <link rel="shortcut icon" href="../img/title.jpg">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/register.css">

  <style>
    .body{
      min-width: 1366px;
    }
  </style>
</head> 

<body>
  <div class="login" id="login-app">
    <div class="login-box">
    <!--      左侧悬赏图-->
      <img src="../img/register.jpg" alt="">
    <!--    右侧表单-->
      <div class="login-form">
        <!--        表单-->
        <el-form ref="loginForm" :model="loginForm" :rules="registerRules" >

          <!--        标题图片-->
          <div class="login-form-title">
            <img src="../img/login/logo.png" style="width:198px;height:85px;" alt="" />
          </div>

        <!--          用户名-->
          <el-form-item label="用户名" prop="username">
            <el-input v-model.number="loginForm.username"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="loginForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>

        <!--        登录按钮-->
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
            <el-button @click="resetForm('loginForm')">重置</el-button>
          </el-form-item>

        <!--          注册链接-->
          <el-form-item style="width:100%;">
            <a href="login.html" class="register-link">注册成功,返回登录</a>
          </el-form-item>

        </el-form>
      </div>
    </div>
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../plugins/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="../plugins/axios/axios.min.js"></script>
  <script src="../js/request.js"></script>
  <script src="../js/validate.js"></script>
  <script src="../api/login.js"></script>

  <script>
    new Vue({
      el: '#login-app',

      data() {

        return {

          // 表单数据模型
          loginForm:{
            username: '',
            password: '',
            checkPass: '',

          },


        }
      },
      computed: {

          // 注册规则
        registerRules() {
          // 用户名规则
          const validateUsername = (rule, value, callback) => {
            if (value.length < 8 ) {
              callback(new Error('用户名必须在8位以上'))
            } else {
              callback()
            }
          }

          // 密码规则
          const validatePassword = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入密码'));
            } else if (value.length < 6) {
              callback(new Error('密码必须在6位以上'))
              }else {
              callback();
            }
          }

          //确认密码规则
          const validatePass2 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.loginForm.password) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          }


          return {
            'username': [{ 'validator': validateUsername, trigger: 'blur' }],
            'password': [{ 'validator': validatePassword, trigger: 'blur' }],
            'checkPass': [{ 'validator': validatePass2, trigger: 'blur' }]
          }
        },

      },
      created() {
      },
      //登录方法
      methods: {
        //提交表单
        submitForm(formName) {
          this.$refs[formName].validate(async (valid) => {
            if (valid) {
              //参数处理
              const params = {
                username:this.loginForm.username,
                password:this.loginForm.password
              }
              //发送请求和响应
              registerApi(params).then(res=>{
                if (String(res.code) == '1') {
                  this.$message.success("注册成功!")
                } else {
                  this.$message.error(res.msg)
                }
              }).catch(err => {
                this.$message.error('请求出错了：' + err)
              })

            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },

        // 重置表单
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    })
  </script>
</body>

</html>
